<template>
	<gesture-back>
		<view class="container">
			<!-- 顶部导航 -->
			<view class="nav-bar">
				<view class="nav-content">
					<text class="page-title">添加</text>
				</view>
			</view>

			<!-- 搜索框 -->
			<view class="search-section">
				<view class="search-box">
					<text class="search-placeholder">搜索你想发布的内容...</text>
				</view>
			</view>

			<!-- 功能按钮 -->
			<view class="content">
				<view class="action-grid">
					<view class="action-item" @tap="navigateToArticle">
						<view class="action-icon">
							<image src="/static/add/msg.png" class="icon-img"></image>
						</view>
						<text class="action-text">发布帖子</text>
						<text class="action-desc">分享你的飞行见闻</text>
					</view>
					
					<view class="action-item" @tap="publishExchange">
						<view class="action-icon">
							<image src="/static/add/huanban.png" class="icon-img"></image>
						</view>
						<text class="action-text">发布换班</text>
						<text class="action-desc">寻找合适的换班伙伴</text>
					</view>
					
					<view class="action-item" @tap="publishSchedule">
						<view class="action-icon">
							<image src="/static/add/star.png" class="icon-img"></image>
						</view>
						<text class="action-text">发布排班</text>
						<text class="action-desc">分享你的排班信息</text>
					</view>
				</view>
			</view>
		</view>
	</gesture-back>
</template>

<script>
import GestureBack from '@/components/gesture-back/index.vue';

export default {
	components: {
		GestureBack
	},
	data() {
		return {
			
		}
	},
	methods: {
		navigateToArticle() {
			uni.navigateTo({
				url: '/pages/add/article/article'
			});
		},
		publishExchange() {
			uni.showToast({
				title: '换班发布功能开发中',
				icon: 'none',
				duration: 2000
			});
		},
		publishSchedule() {
			uni.showToast({
				title: '排班发布功能开发中',
				icon: 'none',
				duration: 2000
			});
		}
	}
}
</script>

<style lang="scss" scoped>
$primary-color: #6c5ce7;
$text-color: #333333;
$light-text: #999999;
$bg-color: #f6f7fb;

.container {
	background-color: $bg-color;
	min-height: 100vh;
}

/* 顶部导航 */
.nav-bar {
	background-color: #fff;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.nav-content {
	padding: 20rpx 30rpx;
	text-align: center;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
	color: $text-color;
}

/* 搜索框 */
.search-section {
	padding: 30rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
}

.search-box {
	height: 80rpx;
	background-color: #f5f5f5;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
}

.search-placeholder {
	color: $light-text;
	font-size: 28rpx;
}

/* 内容区域 */
.content {
	padding: 0 30rpx;
}

.action-grid {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.action-item {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 40rpx 30rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	transition: all 0.3s ease;
	
	&:active {
		transform: scale(0.98);
		background-color: #f8f9fa;
	}
}

.action-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 16rpx;
	background: linear-gradient(135deg, $primary-color, #a29bfe);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 30rpx;
	flex-shrink: 0;
}

.icon-img {
	width: 40rpx;
	height: 40rpx;
}

.action-text {
	font-size: 32rpx;
	font-weight: 500;
	color: $text-color;
	margin-bottom: 8rpx;
	display: block;
}

.action-desc {
	font-size: 24rpx;
	color: $light-text;
	line-height: 1.4;
}
</style>
